<template>
	<el-row style="display: flex; justify-content: space-between;align-items: center;">
	<h3>添加新的教师</h3>
	<p @click="che" style="cursor: pointer;" >返回</p>
	</el-row>
	<div class="box">
		<el-form ref="myForm" :rules="rules" :model="formData" >
		<div class="oneblock">	
			<el-form-item label="姓名:" label-width="100" prop="teaName">
				<el-input v-model="formData.teaName" placeholder="请输入姓名"></el-input>
			</el-form-item>
			<el-form-item label="性别:" label-width="100" prop="teaSex">
				<el-select v-model="formData.teaSex" placeholder="请选择性别">
				  <el-option label="男" value="男"></el-option>
				  <el-option label="女" value="女"></el-option>
				</el-select>
			</el-form-item>
		</div>
		<div class="oneblock">
			<el-form-item label="职称:" label-width="100" prop="teaTitle">
				<el-select v-model="formData.teaTitle" placeholder="请选择职称">
				  <el-option :label="x.titleName" :value="x.titleId" v-for="x in Title" :key="x.titleId"></el-option>
				</el-select>
			</el-form-item>
	<!-- 		<el-form-item label="权限:" label-width="100">
				<el-input v-model="roleIds"></el-input>
			</el-form-item> -->
			<el-form-item label="密码:" label-width="100" prop="teaPass">
				<el-input v-model="formData.teaPass" placeholder="请输入密码"></el-input>
			</el-form-item>
		</div>
		<div class="oneblock">
			<el-form-item label="年龄:" label-width="100" prop="teaAge">
				<el-input v-model="formData.teaAge" placeholder="请输入年龄"></el-input>
			</el-form-item>
			<el-form-item label="联系方式:"  label-width="100" prop="teaPhone">
				<el-input v-model="formData.teaPhone" placeholder="请输入联系方式"></el-input>
			</el-form-item>
		</div>
		<div class="oneblock">
			<el-form-item label="教学科目:"  label-width="100" prop="checkList">
			<!-- 	<el-input
				placeholder="请选择教学科目" @click="show()">
				</el-input> -->
			<el-input placeholder="请选择教学科目" suffix-icon="el-icon-arrow-right" @click="show()"  v-model="formData.checkList">
			</el-input>
			</el-form-item>
			<el-form-item label="账号:"  label-width="100" prop="teaUser">
				<el-input v-model="formData.teaUser" placeholder="请输入账号"></el-input>
			</el-form-item>
		</div>
		<div class="oneblock">
			<el-form-item label="教师权限:"  label-width="100" prop="rolelistone">
			<!-- 	<el-input
				placeholder="请选择教学科目" @click="show()">
				</el-input> -->
			<el-input placeholder="请选择教师权限" suffix-icon="el-icon-arrow-right" @click="show1()"  v-model="formData.rolelistone">
			</el-input>
			</el-form-item>
		</div>
		</el-form>
		<div style="margin-top: 60px;margin-left: 40px;">
			<el-button @click="teaAdd(myForm)"class="btn1">确定</el-button>
			<el-button class="btn2" @click="addconcel">取消</el-button>
		</div>
	</div>
		<el-dialog
			title="请选择教学科目"
			v-model="dialogFormVisible"
			width="30%"
			center>
	     
	        <el-checkbox-group v-model="checkList">
	          <!-- <el-checkbox label="无" :value="'k'">无</el-checkbox> -->
	          <el-checkbox :label="x.subName" v-for="(x,index) in Subs" :value="x.subId" :key="index">{{ x.subName }}</el-checkbox> 
	        </el-checkbox-group>     
	       <template #footer>
				<el-button type="primary" @click="addrole()">确 定</el-button>
				<el-button @click="dialogFormVisible= false">取 消</el-button>
			</template>
		</el-dialog>
		
		<el-dialog
			title="请选择教师权限"
			v-model="dialogFormVisible1"
			width="30%"
			center>
		 
		    <el-checkbox-group v-model="rolelistone">
		      <!-- <el-checkbox label="无" :value="''">无</el-checkbox> -->
		      <el-checkbox :label="x.roleName" v-for="(x,index) in addrolelist" :value="x.roleId" :key="index">{{ x.roleName }}</el-checkbox> 
		    </el-checkbox-group>     
		   <template #footer>
					<el-button type="primary" @click="addrole1()">确 定</el-button>
					<el-button @click="dialogFormVisible1= false">取 消</el-button>
			</template>
		</el-dialog>
		
		
</template>

<script setup lang="ts">
	import { ElMessage } from "element-plus";
	import{defineEmits,reactive,ref} from "vue"
	import type { FormInstance, FormRules } from 'element-plus'
	import {teacherAdd,titleListOption,SubListOption,allrolelist} from "@/api/lqy";
	const emit = defineEmits("che")
	let myForm = ref(null)
	let formData=reactive({
		teaName:'',
		teaSex:'',
		teaAge:'',
		teaPhone:'',
		teaTitle:'',
		teaUser:'',
		teaPass:'',
		checkList:'',
		rolelistone:''
	})
	
	let Title=ref([]) //职称
	let Subs=ref([]) //科目
	let checkList=ref([])
	// let rolelistone=ref()
	let dialogFormVisible=ref(false)
	let dialogFormVisible1=ref(false)
	const che = () => {
		emit("che")
	}
	const addconcel=()=>{
		formData.teaName=''
		formData.teaSex=''
		formData.teaAge=''
		formData.teaPhone=''
		formData.teaTitle=''
		formData.teaUser=''
		formData.teaPass=''
		formData.checkList=''
		formData.rolelistone=''
	}
	// // 根据id查询教师
	//科目
	const getSubList=async()=>{
		let res =await SubListOption()
		// console.log(res)
		Subs.value=res
		let obj={
			subId:'',
			subName:'无'
		}
		Subs.value.push(obj)
		// console.log("科目",Subs.value)
	}
	getSubList()
	//职称
	const getTitleList=async()=>{
		let res =await titleListOption()
		// console.log(res)
		Title.value=res
		
		console.log(Title.value)
	}
		getTitleList()
	const show=()=>{
	  dialogFormVisible.value=true
	}
	const show1=()=>{
	  dialogFormVisible1.value=true
	}
	const addrole=()=>{
	  dialogFormVisible.value=false
		let arr=[]
	  Subs.value.forEach(v=>{
	  	checkList.value.forEach(x=>{
	  		// console.log(x)
			if(v.subId==x){
				arr.push(v.subName)
			}
	  	})
		// console.log(v)
	  })
		let str	=arr.join("/")
	   formData.checkList=str
	   // alert(checkList.value)
	   if(checkList.value==[]){
	   		formData.checkList='无'
	   }
	}
	
	const addrole1=()=>{
		dialogFormVisible1.value=false
		let arr=[]
		addrolelist.value.forEach(v=>{
			rolelistone.value.forEach(x=>{
				// console.log(x)
					if(v.roleId==x){
						arr.push(v.roleName)
					}
			})
				// console.log(v)
		})
		// console.log("权限",arr)
		let str	=arr.join("/")
		formData.rolelistone=str
	}
	
	//用户角色
	let pageIndex=ref(1)
	let pageSize=ref(20)
	let addrolelist=ref([])
	let rolelistone=ref([2])
	const getrolelist=async()=>{
		let res=await allrolelist({
			pageIndex:String(pageIndex.value),
			pageSize:String(pageSize.value)
			// pageIndex:pageIndex.value,
			// pageSize:pageSize.value
		})
		addrolelist.value=res.list
		let obj={
			roleId:'',
			roleName:'无'
		}
		addrolelist.value.push(obj)
		// console.log("角色列表",res)
		
	}
	getrolelist()
	// teaUser
	//表单验证
	const checkPhone=(rule:any,value:any,callback:any)=>{
		let reg=/^1[3-9][0-9]{9}$/
		if (value === '') {
		    callback(new Error('手机号不能为空'))
		  } else if (!reg.test(value)) {
		    callback(new Error("请输入正确的手机号"))
		  } else {
		    callback()
		  }
	}
	let rules=reactive<FormRules>({
		teaPhone:[
			{
				validator:checkPhone,
				required: true,
				trigger: 'blur'
			}
		],
		teaName:[
			{
				required: true,
				trigger: 'blur',
				message:"请假说明不能为空"
			}
		],
		teaUser:[
			{
				required: true,
				trigger: 'blur',
				message:"请假输入账号"
			}
		],
		teaPass:[
			{
				required: true,
				trigger: 'blur',
				message:"请输入密码"
			}
		],
		teaAge:[
			{
				required: true,
				trigger: 'blur',
				message:"请输入年龄"
			}
		],
		teaTitle:[
			{
				required: true,
				trigger: 'blue',
				message:"请选择职称"
			}
		],
		teaSex:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择性别"
			}
		],
		// checkList:[
		// 	{
		// 		required: true,
		// 		trigger: 'blur',
		// 		message:"请选择科目"
		// 	}
		// ],
		rolelistone:[
			{
				required: true,
				trigger: 'blur',
				message:"请选择权限"
			}
		]
	})
	
	const teaAdd=async(formEl:FormInstance)=>{
		formEl.validate(async (valid:boolean,fileds)=>{
				if(valid){
					let res = await teacherAdd({
							teaName:formData.teaName,                 //教师名
						    teaSex:formData.teaSex,                   //教师性别
						    teaAge:formData.teaAge,                      //教师年龄
						    teaPhone:formData.teaPhone, 				//教师电话
						    teaTitle:formData.teaTitle,                     //教师职称
						    teaSubs:checkList.value,
						    teaUser:formData.teaUser,
						    teaPass:formData.teaPass,
							// roleIds:roleIds.value,
							roleIds:rolelistone.value
					})
					if(res==undefined){
						ElMessage.success("教师信息添加成功")
						setTimeout(() => {
							che()
						}, 500)
					}
					// console.log(res)
				}
		})

		
		
		// roleIds.value=Math.floor(Math.random()*100+1)
		
	}
</script>

<style scoped>
	.oneblock{
		display: flex;
	}
	.el-input{
		   width: 205px !important;
		   margin-right: 10px;
		   border: none;
	}
	.el-select{
		   width: 205px !important;
		   margin-right: 10px;
		   border: none;
	}
	.box {
	  margin-top: 30px;
	}
/* 	
	.box .el-form-item {
	  width: 37%;
	  display: flex;
	  float: left;
	} */
	.btn1{
		/* padding: 16px 60px; */
		border: none;
		border-radius: 4px;
		color: #fff;
		margin: 10px;
		cursor: pointer;
		background-color: #106ab1;
	}
	.btn2{
		/* padding: 16px 60px; */
		border: none;
		border-radius: 4px;
		color: #fff;
		margin: 10px;
		cursor: pointer;
		background-color: #999;
	}
	.searchBtn{
	    background-color: #106ab1;
	    border: none;
	}
	.addBtn{
	    background-color: #00a0e9;
	    border: none;
	    float: right;
	    margin-right: 20px;
	}
</style>